<template>
    <div class="jianzhan-wrapper">
        <Crumb name="User Manage"/>
        <div class="jianzhan-content">
            <div class="department">
                <div class="title" @click="
                departmentShow = true
                clear()
        ">Department List
                    <i class="el-icon-plus"></i>
                </div>
                <el-tree
                        :data="departmentList"
                        node-key="id"
                        default-expand-all
                        :expand-on-click-node="false"
                        highlight-current
                        @node-click="setCurrent"
                        :props="props"
                >
                  <span class="my-tree-item" slot-scope="{ node, data }">
                    <span>{{node.label}}</span>
                       <span>
                          <el-button
                                  type="text"
                                  size="mini"
                                  @click="
                                  departmentShow = true
                                  parentName = node.parent.data.name
                                  ruleForm = data
                                ">
                           <i class="el-icon-edit"></i>
                          </el-button>

                           <el-popover
                                   placement="right"
                                   width="160"
                                   v-model="data.visible"
                           >
                                   <p>Do you want to delete {{current.name}} department?</p>
                                  <div style="text-align: right; margin: 0">
                                    <el-button size="mini" type="text" @click="data.visible = false">cancel</el-button>
                                    <el-button size="mini" type="text" @click="
                                         data.visible = false
                                         remove(node, data)
                                    ">confirm</el-button>
                                  </div>
                                    <el-button
                                            slot="reference"
                                            type="text"
                                            style="color: #c60023"
                                            size="mini"
                                            @click="visible2 = true">
                                    <i class="el-icon-delete"></i>
                                    </el-button>
                            </el-popover>

                        </span>
                  </span>
                </el-tree>
            </div>
            <div class="user">
                <div class="title" @click="
                     clearUser()
                     userShow = true
                    ">
                    {{current.name}}
                    User List
                    <i class="el-icon-plus"></i>
                </div>
                <el-table :data="userList" row-key="id">
                    <el-table-column label="Name" prop="username"></el-table-column>
                    <el-table-column label="Department">
                        <template slot-scope="user"><span :id="user.id">{{current.name}}</span></template>
                    </el-table-column>
                    <el-table-column label="login name" prop="loginName"></el-table-column>
                    <el-table-column label="Phone" prop="telephone"></el-table-column>
                    <el-table-column label="Status">
                        <template slot-scope="user">
                            <el-tag :type="getStatus(user.row.status)">{{user.row.status | transfromStatus}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="users">
                            <el-button type="text" @click="
                                userShow = true
                                user = users.row
                            ">Modify
                            </el-button>
                        </template>
                    </el-table-column>


                </el-table>
            </div>
            <el-dialog title="Department" :visible.sync="departmentShow" width="40%">
                <el-form :model="ruleForm" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                    <el-form-item label="Parent Department">
                        <span v-show="ruleForm.id">{{parentName}}</span>
                        <el-cascader
                                :show-all-levels="false"
                                clearable
                                :options="departmentList"
                                :props="{value:'id',label:'name',children:'deptList'}"
                                change-on-select
                                v-show="!ruleForm.id"
                                @change="handleChange">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="Name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="Remark">
                        <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                        <el-button @click="departmentShow = false">Cancel</el-button>
                        <el-button type="primary" @click="saveDepartment">Confirm</el-button>
                    </span>
            </el-dialog>
            <el-dialog title="User" :visible.sync="userShow" width="40%">
                <el-form label-width="200px" :model="user">
                    <el-form-item label="Department">
                        <el-select
                                v-model="user.deptId"
                                filterable
                                >
                            <el-option v-for="item in spreadDepartmentList" :key="item.id" :value="item.id" :label="item.name"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="name">
                        <el-input v-model="user.username"/>
                    </el-form-item>
                    <el-form-item label="Phone">
                        <el-input v-model="user.telephone"></el-input>
                    </el-form-item>
                    <el-form-item label="Login Name">
                        <el-input v-model="user.loginName"></el-input>
                    </el-form-item>
                    <el-form-item label="status">
                        <el-select v-model="user.status">
                            <el-option :value=0 label="Not active"/>
                            <el-option :value=1 label="Active"/>
                            <el-option :value=2 label="Deleted"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="remark">
                        <el-input type="textarea" v-model="user.remark"/>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                        <el-button @click="userShow = false">Cancel</el-button>
                        <el-button type="primary" @click="saveUser">Confirm</el-button>
                    </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {ERROR_OK} from "../../util/config";
    import {getArray} from "../../util";
    import {
        getDepartmentList,
        addDepartment,
        modDepartment,
        deleteDepartment,
        getUserList,
        addUser,
        modUser
    } from "../../api/auth";
    import Crumb from '@/components/common/crumb.vue'

    export default {
        name: "user-manage",
        data() {
            return {
                departmentList: [],
                userList: [],
                props: {
                    label: 'name',
                    children: 'deptList'
                },
                current: {},
                visible2: false,
                userShow:false,
                departmentShow: false,
                ruleForm: {
                    name: '',
                    parentId: '',
                    seq: '',
                    remark: ''
                },
                user: {
                    username: '',
                    telephone: '',
                    loginName: '',
                    deptId: '',
                    status: '',
                    remark: ''
                },
                parentName: '',
            }
        },
        computed:{
            spreadDepartmentList(){
                return getArray(this.departmentList)
            }
        },
        filters: {
            transfromStatus(status) {
                const statusList = ['Not active', 'Active', 'Deleted'];
                return statusList[status]
            }
        },
        created() {
            this._getDepartment();
        },
        components: {
            Crumb
        },
        methods: {
            handleChange(v) {
                const vList = [...v];
                this.ruleForm.parentId = vList.pop();
            },
            async saveDepartment() {
                let {id, seq, remark, parentId, name} = this.ruleForm;
                parentId = parentId || 0;
                seq = seq || 1
                if (id) {
                    //修改
                    const {status} = await modDepartment({id, seq, remark, parentId, name});
                    if (status === ERROR_OK) {
                        this.$message({message: 'Modify Successfully', type: 'success'})
                    } else {
                        this.$message({message: 'Modify Error,please try again', type: 'error'})
                    }
                } else {
                    const {status} = await addDepartment({name, seq, parentId, remark});
                    if (status === ERROR_OK) {
                        this.$message({message: 'Add Successfully', type: 'success'});
                        this._getDepartment()
                    } else {
                        this.$message({message: 'Add Error,please try again', type: 'error'})
                    }
                }
                this.departmentShow = false
            },
            async saveUser() {
                let {id,username,telephone,loginName,deptId,status,remark} = this.user;
                if(id){
                    const {status:status1} = await modUser({id,username,telephone,loginName,deptId,remark,status});
                    if(status1 === ERROR_OK) {
                        this.$message({
                            message:'Modify user successfully',
                            type:'success'
                        })
                    } else {
                        this.$message({
                            message:'Modify user error,please try again',
                            type:'error'
                        })
                    }
                } else {
                    const {status:status1} = await addUser({username,telephone,loginName,deptId,remark,status});
                    if(status1 === ERROR_OK) {
                        this.$message({
                            message:'Add User successfully',
                            type:'success'
                        });
                        this._getUserList(this.user.deptId)
                    }else {
                        this.$message({
                            message:"Add user error,please try again",
                            type:'error'
                        })
                    }
                }
                this.userShow = false
            },
            clearUser(){
                   this.user = {
                       username: '',
                       telephone: '',
                       mail: '',
                       deptId: '',
                       status: '',
                       remark: ''
                   }
            },
            clear() {
                this.ruleForm = {
                    id:'',
                    name: '',
                    seq: '',
                    parentId: this.ruleForm.parentId,
                    remark: ''
                }
            },
            async remove(node, data) {
                let {status} = await deleteDepartment(data.id);
                if (status === ERROR_OK) {
                    const parent = node.parent;
                    const children = parent.data.deptList || parent.data;
                    const index = children.findIndex(d => d.id === data.id);
                    children.splice(index, 1);
                    this.current = {}
                }
            },
            async _getUserList(deptId) {
                let {status, data} = await getUserList(deptId);
                if (status === ERROR_OK) {
                    this.userList = data.list
                } else {
                    this.userList = []
                }
            },
            getStatus(status) {
                if (status === 0) return 'warning';
                else if (status === 1) return 'success';
                else return 'danger'
            },
            setCurrent(data) {
                this.current = data;
                this._getUserList(data.id)
            },
            async _getDepartment() {
                let {status, data} = await getDepartmentList();
                if (status === ERROR_OK) {
                    this.departmentList = data
                }
            }
        },
    }
</script>

<style scoped lang="scss">
    .jianzhan-wrapper {
        background: #fff;
        .jianzhan-content {
            padding: 5px 0;
            .department, .user {
                text-align: left;
                overflow: hidden;
                display: inline-block;
                vertical-align: top;
                .title {
                    user-select: none;
                    text-align: center;
                    cursor: pointer;
                    border-radius: 2px;
                    width: 150px;
                    height: 30px;
                    line-height: 30px;
                    background: #409EFF;
                    color: #fff;
                    padding: 0 20px;
                    &:hover {
                        background: #3a8ee6;
                    }
                }
            }
            .department {
                width: 30%;
                margin-right: 30px;
                .my-tree-item {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-right: 8px;
                }
            }
            .user {
                width: 65%;
            }
        }
    }
</style>